<template>
  <el-container class="back-white askDetails">
    <el-main>
      <div class="mb075">
        <el-breadcrumb separator="/" class="dib vam mr100">
          <el-breadcrumb-item> 问诊列表</el-breadcrumb-item>
          <el-breadcrumb-item>问诊详情</el-breadcrumb-item>
        </el-breadcrumb>
        <el-button type="text" class="dib vam" icon="el-icon-arrow-left" @click="$router.go(-1)">返回</el-button>
      </div>
      <div class="x-item x-item-none mb100">
        <h5 class="pdtb075 x-fs-090">
          <i class="el-icon-date mr05"></i>
          <span class="x-fs-075">问诊详情</span>
        </h5>
        <table class="detail-table">
          <tr>
            <td class="th">用户ID</td>
            <td><span>{{detailInfo.uid}}</span></td>
            <td class="th">医生ID</td>
            <td><span v-if="detailInfo.doctors">{{detailInfo.doctors.doctor_id}}</span></td>
            <td class="th">病症</td>
            <td><span>{{detailInfo.result}}</span></td>
          </tr>
          <tr>
            <td class="th">医生名称</td>
            <td><span v-if="detailInfo.doctors">{{detailInfo.doctors.name}}</span></td>
            <td class="th">医生头像</td>
            <td><img :src="'http://renqing123.oss-cn-shenzhen.aliyuncs.com/' + detailInfo.doctors.avatar" width="60"></td>
            <td class="th">病症描述</td>
            <td><span>{{detailInfo.description}}</span></td>
          </tr>
          <tr>
            <td class="th">姓名</td>
            <td><span>{{detailInfo.name}}</span></td>
            <td class="th">年龄</td>
            <td><span>{{detailInfo.age}}</span></td>
            <td class="th">性别</td>
            <td><span v-if="detailInfo.sex == 1">男</span><span v-if="detailInfo.sex == 2">女</span></td>
          </tr>
          <tr>
            <td class="th">问诊附件</td>
            <td>
              <img @click="setBig(i)" :src="'http://renqing123.oss-cn-shenzhen.aliyuncs.com/' + img" width="50" class="mr05" v-for="(img,i) in detailInfo.images">
            </td>
            <td class="th">问诊状态</td>
            <td>
              <span v-if="detailInfo.status == 0">待付款</span>
              <span v-if="detailInfo.status == 1">未开始</span>
              <span v-if="detailInfo.status == 2">进行中</span>
              <span v-if="detailInfo.status == 3">已结束</span>
            </td>
            <td class="th">创建预约时间</td>
            <td><span>{{detailInfo.create_time}}</span></td>
          </tr>
          <tr>
            <td class="th">费用</td>
            <td><span>￥{{detailInfo.price}}</span></td>
            <td class="th">问诊结果</td>
            <td>
              <span v-if="!detailInfo.orders">无</span>
              <span v-else>开处方</span>
            </td>
            <td class="th">预约问诊时间</td>
            <td><span v-if="detailInfo.doctorInquirys">{{detailInfo.doctorInquirys.inquiry_start_time}}</span></td>
          </tr>
        </table>
      </div>
      <div class="x-item x-item-none">
        <h5 class="pdtb075 x-fs-090 mb075">
          <i class="el-icon-tickets mr05"></i>
          <span class="x-fs-075">处方详情</span>
        </h5>
        <ul class="chu-details">
          <li><span class="chu-sName">处方单号:</span><span class="chu-sVal">{{detailInfo.orders.order_no}}</span></li>
          <li><span class="chu-sName">病症:</span><span class="chu-sVal">{{detailInfo.result}}</span></li>
          <li><span class="chu-sName">诊断原因:</span><span class="chu-sVal">{{detailInfo.orders.decide}}</span></li>
          <li><span class="chu-sName">处方内容:</span><span class="chu-sVal">{{detailInfo.orders.content}}</span></li>
          <li><span class="chu-sName">医生嘱咐:</span><span class="chu-sVal">{{detailInfo.orders.explain}}</span></li>
          <li><span class="chu-sName">处方费用:</span><span class="chu-sVal x-co2">￥{{detailInfo.orders.order_price}}</span></li>
          <li><span class="chu-sName">运费:</span><span class="chu-sVal x-co2">￥{{detailInfo.orders.freight}}</span></li>
        </ul>
      </div>
    </el-main>
    <!-------------------查看大图弹窗------------------->
    <el-dialog title="问诊附件图片" :visible="bigSwitch" :before-close="ai_dialog_close">
      <el-carousel height="460px" arrow="always" :initial-index="startIndex">
        <el-carousel-item v-for="img in imgList" :key="img">
          <div class="imgBox">
            <img :src="'http://renqing123.oss-cn-shenzhen.aliyuncs.com/' + img" alt="">
          </div>
        </el-carousel-item>
      </el-carousel>
    </el-dialog>
  </el-container>
</template>
<script type="text/ecmascript-6">
  import {getDataDetail} from '../../api/api';
  export default{
    data(){
      return {
        detailId: this.$route.query.id, //问诊id
        detailInfo: {}, //问诊详情
        imgList: [], //要查看的图片列表
        startIndex: 0, //开始位置
        bigSwitch: false //查看大图弹窗
      }
    },
    created(){
      this.getData();
    },
    methods:{
      getData(){
        let o = {
          "model": "Subscribes",
          "with":{
            "0":"doctors",
            "1":"orders",
            "2":"doctorInquirys"
          },
          "condition": {
            "id": this.detailId
          }
        };
        getDataDetail(o).then((data) => {
          console.log(data);
          this.detailInfo = data.data.data;
          this.detailInfo.images = this.detailInfo.images.split(',');
          this.imgList = this.detailInfo.images;
          console.log(this.detailInfo.images)
        })
      },
      ai_dialog_close(){
        this.bigSwitch = false;
      },
      setBig(i){
        this.startIndex = i;
        this.bigSwitch = true;
      }
    }
  }
</script>
<style>
  .detail-table{
    border: 1px solid #eaeaea;
    border-collapse: collapse;
    font-size: 13px;
    width: 100%;
  }
  .detail-table tr td{
    padding: 15px;
    border: 1px solid #eaeaea;
    background: white;
  }
  .detail-table tr td.th{
    background: #f8f9fb;
    text-align: right;
    width: 120px;
  }
  .chu-details{
    font-size: 14px;
  }
  .chu-details li{margin-bottom: 25px}
  .chu-details li .chu-sName{
    color: #a9aab4;
    display: inline-block;
    vertical-align: top;
    width: 100px;
    margin-right: 15px;
    text-align: right;
  }
</style>
